<!-- 选择供应商控件 -->
<template>
  <a-space direction="vertical" style="width: 100%">
    <a-select
      :disabled="props.disabled"
      @change="getClientInfo"
      :placeholder="props.placeholder"
      v-model="form"
      allow-search
    >
      <a-option v-for="item in Supplier.list" :key="item.id" :value="item.id"
        ><div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
          ><div>{{ item.name }}</div>
          <a-tag style="margin-left: 20px" v-if="item.showBtn" color="green"
            >常用</a-tag
          >
        </div></a-option
      >
    </a-select>
  </a-space>
  <!-- <a-space direction="vertical" style="width: 100%">
    <a-input
      :disabled="props.disabled"
      :model-value="modelValue"
      @click="getData"
    />
  </a-space> -->
  <!-- <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
    <template #title> 选择供应商 </template>
    <div class="box">
      <div class="box-left">
        <div
          class="item"
          v-for="item in Supplier.list"
          :key="item.id"
          @click="selected(item)"
          >{{ item.name }}</div
        >
      </div>
      <div class="box-right">
        <span class="item" v-show="clientSelect">
          {{ clientSelect }}
        </span>
      </div>
    </div>
  </a-modal> -->

  <!-- <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
    <template #title> 选择供应商 </template>
    <div class="box">
      <div
        :class="index === rowIndex ? 'New-item' : 'item'"
        v-for="(item, rowIndex) in Supplier.list"
        :key="item.id"
        @click="selected($event, item, rowIndex)"
        >{{ item.name }}</div
      >
    </div>
  </a-modal> -->
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, onMounted, nextTick } from 'vue';
  import {
    GetSupplierPrimaryList,
    GetSupplierPrimaryDetail,
  } from '@/api/buy-management/supplier-management/supplier-primary-list/index';
  import miiter from '@/utils/mitt';

  const props = withDefaults(
    defineProps<{
      props: { [propName: string]: any };
      name?: string;
      required?: boolean;
      oneValue: any;
      disabled: boolean;
      regex?: {
        [name: string]: {
          role: any;
          name: any;
        };
      };
    }>(),
    {}
  );

  const emit = defineEmits(['update:oneValue']);
  const visible = ref(false);
  interface ItemType {
    id: number;
    name: string;
  }
  interface ListType {
    list: ItemType[];
  }
  const Supplier = reactive<ListType>({ list: [{ id: 0, name: '' }] });
  const value = ref([]);
  const form = computed({
    get() {
      return props.oneValue;
    },
    set(val) {
      emit('update:oneValue', val);
    },
  });
  const clientSelect = ref('');
  const itemSelected = ref(); // 储存当前选择的客户信息
  const modelValue = ref('');
  const index = ref();
  // TODO:查询方式要改
  const getData = async () => {
    let params = {
      page: 0,
      size: -1,
    };
    let res = await GetSupplierPrimaryList(params);
    visible.value = true;
    Supplier.list = res.content;
    console.log(2, props);
    // props.props.productId
    Supplier.list.forEach((item: any) => {
      item.showBtn = item.product.some(
        (ele) => ele.managementId === props.props.productId
      );
    });
    console.log(Supplier.list, '---------------');

    // if (props.oneValue) {
    //   index.value = Supplier.list.findIndex(
    //     (item) => item.id === props.oneValue
    //   );
    // }
  };
  getData();

  const getClientInfo = async (id: number, isEmpty?: boolean) => {
    if (id) {
      let res = await GetSupplierPrimaryDetail({
        id,
      });
      itemSelected.value = res;
      modelValue.value = res.name;
      miiter.emit('clientRefresh', {
        item: itemSelected.value,
        key: 'supplier',
      });
    }
  };

  // const selected = (e: any, item: any, rowIndex: number) => {
  //   index.value = rowIndex;
  //   clientSelect.value = item.name;
  //   getClientInfo(item.id);
  // };

  // const handleOk = () => {
  //   visible.value = false;
  //   form.value = itemSelected.value.id;
  //   modelValue.value = itemSelected.value.name;
  // };

  // const handleCancel = () => {
  //   visible.value = false;
  // };

  interface DepartmentItem {
    id: number;
    name: string;
    [name: string]: string | number;
  }
  interface Department {
    department: DepartmentItem[];
  }
  const data = reactive<Department>({ department: [] });

  onMounted(() => {
    if (props.oneValue) {
      getClientInfo(Number(props.oneValue), true);
    }
  });
</script>

<style scoped lang="less">
  .box {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;

    .item {
      width: 100px;
      padding: 6px;
      margin: 8px;
      border-radius: 5px;
      background: #eee;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .New-item {
      width: 100px;
      padding: 6px;
      margin: 8px;
      border-radius: 5px;
      background: skyblue;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>
